@page
@{ Layout = "_LayoutHome"; }

@section Styles{
    <style>
        .el-descriptions-item__label.is-bordered-label {
            width: 180px;
        }

        body {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
        }

        html {
            padding: 0;
            margin: 0;
            background-color: #ffffff;
        }
    </style>
}
<el-card class="rounded-0">
    <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex flex-row align-items-center">
            <img :src="DEFAULT_LOGO_URL" class="me-3 avatar-md" />
            <h2 class="h1 fw-bold m-0 p-0">首 页</h2>
        </div>
        <div>
            <button type="button" class="btn btn-outline-dark-warning border-0 me-3" v-on:click="btnEventClick" v-if="utils.contains(openMenus,'examPaper')"><i class="bi bi-calendar3 me-2"></i>日 程</button>
            <el-dropdown :show-timeout="0" placement="left">
                <img :src="user.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle avatar-lg shadow-lg" />
                <el-dropdown-menu slot="dropdown">
                    <div class="d-flex justify-content-between align-items-center px-3">
                        <button class="btn btn-sm btn-outline-white border-0" v-on:click="btnUserMenuClick('profile')"><i class="el-icon-edit me-2"></i>编辑信息</button>
                        <button class="btn btn-sm btn-outline-white border-0" v-on:click="btnUserMenuClick('password')"><i class="el-icon-key me-2"></i>修改密码</button>
                        <button class="btn btn-sm btn-outline-warning border-0" v-on:click="btnUserMenuClick('logout')"><i class="el-icon-switch-button me-2"></i>安全退出</button>
                    </div>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</el-card>
<div>
    <div class="container mt-8">
        <div class="bg-cover rounded-5 position-relative shadow-lg bg-white mb-3 p-3" :style="{'background-image':'url('+(user.avatarbgUrl || DEFAULT_AVATAR_BG_URL)+')'}">
            <div class="align-items-center" :style="{height:(($(window).height()/4))+'px'}">
            </div>
            <div class="d-flex align-items-center justify-content-between p-3 rounded-none">
                <div class="d-flex align-items-end justify-content-between bg-black bg-opacity-50 p-1">
                    <div class="h2 px-3 py-1 text-white" style="background-color: rgba(0, 0, 0, 0.1);">欢迎回来：）{{user.displayName}}</div>
                </div>
            </div>
            <div class="position-absolute top-0 end-0 p-5">
                <h2 class="rounded-3 text-white px-3 py-1" style="background-color: rgba(0, 0, 0, 0.1);"><i class="bi bi-calendar4-event me-3"></i>{{ dateStr }}</h2>
            </div>
        </div>
        <div class="row my-8">
            <div class="col-7">
                <div class="ps-8" v-if="todayExam && todayExam.id>0 && utils.contains(openMenus,'examPaper')">
                    <div class="text-uppercase text-warning fw-semibold p-4 mt-3">
                        <i class="bi bi-flag-fill me-2"></i>今日考试安排
                    </div>
                    <a class="card bg-primary border-primary" href="javascript:;" v-on:click="btnViewPaperClick(todayExam.id)">
                        <div class="card-body d-flex justify-content-between align-items-center">
                            <div class="d-flex flex-column gap-8">
                                <h4 class="card-title text-white mb-0">{{ todayExam.title }}</h4>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="d-flex flex-column gap-1">
                                        <h1 class="display-4 text-white mb-0">{{ todayExam.examStartDateTimeStr }} 开考</h1>
                                        <p class="mb-0 text-white" v-if="todayExam.myExamTimes>0">（已参与）</p>
                                        <p class="mb-0 text-white" v-else>请及时参加</p>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <i class="bi bi-flag-fill fs-1 text-warning"></i>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="ms-8" v-else>
                    <div class="text-uppercase text-warning fw-semibold p-4 mt-3">
                        <i class="bi bi-flag-fill me-2"></i>今日考试安排
                    </div>
                    <div class="card bg-light borde-0">
                        <div class="card-body text-center d-flex justify-content-center align-items-center">
                            <span class="me-8 fw-bold">暂无考试安排</span>
                            <el-empty image="/sitefiles/assets/images/nodata.svg" image-size="66" description=" "></el-empty>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-5">
                <div class="text-end">
                    <apexchart class="pt-3" type="radialBar" :options="passChartOptions" :series="passSeries" height="399"></apexchart>
                </div>
            </div>
        </div>
    </div>
</div>
<el-card class="rounded-0">
    <div class="row g-5 py-5">
        <div class="col-xl-4 col-lg-4 col-md-4 col-4" v-if="utils.contains(openMenus,'examPaper')">
            <a class="card card-lift rounded-0" href="javascript:;" v-on:click="btnMoreMenuClick('examPaper')">
                <div class="d-flex justify-content-between align-items-center card-body">
                    <div class="ms-3">
                        <h4 class="mb-1">
                            <span>累计考试<span class="mx-2 text-success">{{ examTotal }}</span>场</span>
                        </h4>
                        <p class="mb-0">
                            <small class="fw-medium"><span>及格率<span class="ms-2 text-success">{{ examPercent }}<span class="fw-light ms-1">%</span></span></span></small>
                        </p>
                    </div>
                    <div>
                        <el-progress type="circle" :percentage="examPercent" color="#5cb87a" :width="99" :stroke-width="8"></el-progress>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-4" v-if="utils.contains(openMenus,'examPaperMoni')">
            <a class="card card-lift rounded-0" href="javascript:;" v-on:click="btnMoreMenuClick('examPaperMoni')">
                <div class="d-flex justify-content-between align-items-center card-body">
                    <div class="ms-3">
                        <h4 class="mb-1">
                            <span>累计模拟自测<span class="mx-2 text-success">{{ examMoniTotal }}</span>场</span>
                        </h4>
                        <p class="mb-0 fs-6">
                            <small class="fw-medium"><span>及格率<span class="ms-2 text-success">{{ examMoniPercent }}<span class="fw-light ms-1">%</span></span></span></small>
                        </p>
                    </div>
                    <div>
                        <el-progress type="circle" :percentage="examMoniPercent" color="#5cb87a" :width="99" :stroke-width="8"></el-progress>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-xl-4 col-lg-4 col-md-4 col-4" v-if="utils.contains(openMenus,'examPractice')">
            <a class="card card-lift rounded-0" href="javascript:;" v-on:click="btnMoreMenuClick('examPractice')">
                <div class="d-flex justify-content-between align-items-center card-body">
                    <div class="ms-3">
                        <h4 class="mb-1">
                            <span>累计刷题<span class="mx-2 text-success">{{ practiceAnswerTmTotal }}</span>道</span>
                        </h4>
                        <p class="mb-0 fs-6">
                            <small class="fw-medium"><span>正确率<span class="ms-2 text-success">{{ practiceAnswerPercent }}<span class="fw-light ms-1">%</span></span></span></small>
                        </p>
                    </div>
                    <div>
                        <el-progress type="circle" :percentage="practiceAnswerPercent" color="#5cb87a" :width="99" :stroke-width="8"></el-progress>
                    </div>
                </div>
            </a>
        </div>
    </div>
</el-card>
<div class="my-8">
    <div class="container mt-8">
        <div class="card p-5 rounded-5 bg-warning shadow-lg mt-3">
            <div class="card-body">
                <div class="task-list">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h2 class="mb-0 text-white fw-bold"><i class="bi bi-flag-fill me-2"></i>{{ taskTotal }} 个待办</h2>
                        </div>
                    </div>
                    <div class="task-kanban mt-5" v-if="taskTotal>0">
                        <div class="row">
                            <div class="col-3" v-for="taskExam in taskPaperList" v-if="taskPaperList && taskPaperList.length>0">
                                <a class="card mb-3" href="javascript:;" v-on:click="btnViewPaperClick(taskExam.id)">
                                    <div class="card-body p-3 d-flex flex-column gap-4 card-lift">
                                        <div>
                                            <el-tag effect="dark" size="mini">考 试</el-tag>
                                            <br />
                                            <span class="h5">{{ taskExam.title }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <span class="fs-6">
                                                        {{ taskExam.examStartDateTimeStr }} 开考
                                                    </span>
                                                </div>
                                            </div>
                                            <div>
                                                <span class="me-2 align-middle">
                                                    <span class="fw-semibold fs-6">{{ taskExam.userExamTimes }}</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-3" v-for="taskQ in taskQList" v-if="taskQList && taskQList.length>0">
                                <a class="card mb-3" href="javascript:;" v-on:click="btnViewQClick(taskQ.id)">
                                    <div class="card-body p-3 d-flex flex-column gap-4 card-lift">
                                        <div>
                                            <span class="badge bg-warning">问卷调查</span>
                                            <br />
                                            <span class="h5">{{ taskQ.title }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <span class="fs-6">
                                                        {{ taskQ.examEndDateTimeStr }} 后过期
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-3" v-for="taskAss in taskAssList" v-if="taskAssList && taskAssList.length>0">
                                <a class="card mb-3" href="javascript:;" v-on:click="btnViewAssClick(taskAss.id)">
                                    <div class="card-body p-3 d-flex flex-column gap-4 card-lift">
                                        <div>
                                            <span class="badge bg-warning">测 评</span>
                                            <br />
                                            <span class="h5">{{ taskAss.title }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <span class="fs-6">
                                                        {{ taskAss.examEndDateTimeStr }} 后过期
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-8" v-if="cerList && cerList.length>0 && utils.contains(openMenus,'examPaperCer')">
            <div class="my-8">
                <div class="text-center mt-8">
                    <h2 class="fw-bold">
                        获得证书
                    </h2>
                    <h1><i class="el-icon-medal text-warning me-2"></i></h1>
                </div>
                <div class="mt-5 mb-8">
                    <el-carousel :interval="3000" type="card" height="200px">
                        <el-carousel-item v-for="cer in cerList" :key="cer.id">
                            <a href="javascript:;" v-on:click="btnViewCer(cer)"><img :src="cer.cerImg" class="img-fluid w-100"></a>
                            <div class="mt-1 text-center"><small>{{ cer.name }}</small></div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="my-8" v-if="utils.contains(openMenus,'examPractice')">
            <div class="bg-light p-5 rounded-5">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-12 text-center">
                                    <h2 class="fw-bold mt-3">
                                        刷题练习
                                    </h2>
                                    <h1><i class="el-icon-s-order text-warning me-2"></i></h1>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-5">
                            <div class="row g-5 d-flex justify-content-between align-items-center">
                                <div class="col-4">
                                    <div class="card rounded-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <el-progress type="circle" :percentage="practiceCollectPercent" color="#67C23A" :width="88" :stroke-width="8"></el-progress>
                                                </div>
                                                <div>
                                                    <div class="p-2 bg-light w-100 rounded-3">
                                                        <el-button type="primary" plain class="p-4 w-100 rounded-3" v-on:click="btnCreatePracticeClick('Collect')">
                                                            <div>
                                                                <i class="bi bi-person-hearts me-2"></i>收藏练习
                                                            </div>
                                                            <div class="fs-6 fw-light mt-2">共 {{ practiceCollectTmTotal }} 道题</div>
                                                        </el-button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="card rounded-5">
                                        <div class="card-body">
                                            <div class="text-center mb-3">
                                                <el-progress type="dashboard" :percentage="practiceAnswerPercent" color="#6600FF" :width="118" :stroke-width="12"></el-progress>
                                                <div class="mt-n2">
                                                    <small>刷题正确率</small>
                                                </div>
                                            </div>
                                            <div class="p-2 bg-light w-100 rounded-pill">
                                                <el-button type="success" plain class="w-100 p-4 rounded-pill" v-on:click="btnCreatePracticeClick('Create')">
                                                    <i class="bi bi-fast-forward-circle-fill me-2"></i>快速开始
                                                </el-button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="card rounded-3">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <div class="p-2 bg-light w-100 rounded-3">
                                                        <el-button type="warning" plain class="p-4 w-100 rounded-3" v-on:click="btnCreatePracticeClick('Wrong')">
                                                            <div>
                                                                <i class="bi bi-backspace-reverse me-2"></i>错题练习
                                                            </div>
                                                            <div class="fs-6 fw-light mt-2">共 {{ practiceWrongTmTotal }} 道题</div>
                                                        </el-button>
                                                    </div>
                                                </div>
                                                <div>
                                                    <el-progress type="circle" :percentage="practiceWrongPercent" color="#E6A23C" :width="88" :stroke-width="8"></el-progress>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-5 text-center">
                            <button class="btn btn-outline-primary border-0" v-on:click="btnMoreMenuClick('examPractice')">更多练习<i class="bi bi-three-dots-vertical ms-2"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="my-8" v-if="knowList && knowList.length>0 && utils.contains(openMenus,'knowleges')">
            <div class="my-8">
                <div class="text-center mt-8">
                    <h2 class="fw-bold">
                        新上知识库
                    </h2>
                    <h1><i class="el-icon-hot-water text-warning me-2"></i></h1>
                </div>
                <div class="mt-5">
                    <div class="row g-5">
                        <div class="col-xl-3 col-lg-3 col-md-3 col-3" v-for="know in knowList">
                            <div class="card card-lift card-hover border bg-white p-2 mb-3" v-on:click="btnViewKnowClick(know)" style="cursor:pointer;">
                                <div class="card position-relative">
                                    <div class="card-body">
                                        <img :src="know.coverImgUrl" class="img-fluid card-img">
                                    </div>
                                    <div class="position-absolute top-0 end-0 me-3">
                                        <small><span class="me-2"><i class="bi bi-star-fill"></i> {{ know.likes }}</span><span><i class="bi bi-heart-fill"></i> {{ know.collects }}</span></small>
                                    </div>
                                </div>
                                <div class="p-1">
                                    <a href="javascript:;" class="text-inherit">{{ know.name }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-3 mb-8">
                    <button class="btn btn-outline-primary border-0" v-on:click="btnMoreMenuClick('knowleges')">更多<i class="bi bi-three-dots-vertical ms-2"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<el-card class="rounded-0 py-3 text-center">
    <small>© {{ DOCUMENTTITLE }} <span class="text-warning">v{{ version }}</span></small>
</el-card>
@section Scripts{
<script src="/sitefiles/assets/lib/apexcharts/apexcharts.js" type="text/javascript"></script>
<script src="/sitefiles/assets/lib/apexcharts/vue-apexcharts.js" type="text/javascript"></script>
<script src="/sitefiles/assets/js/home/dashboard.js" type="text/javascript"></script> }